<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>
            <div class="login">
                <a href="javascript:;">登陆</a>
                /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li id="ImUsername">我是用户名</li>
                        <li><a href="./course.html">课程中心</a></li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="all">
        <div class="crumbs">
            <span>首页</span>
            <span>></span>
            <span>同步课堂</span>
            <span>></span>
            <span>视频详情</span>
        </div>
    </div>
    <!-- 主体内容 -->
    <main>
        <div class="classDetail">
            <!-- <div class="left">
                <img src="../img/videoDetail/san.png" alt="">
            </div>
            <div class="right">
                <p class="title">[2019年秋季] 初三数学班</p>
                <ul>
                    <li>年级科目：初三数学</li>
                    <li>地区：北京</li>
                    <li>开课时间：09月30日—12月20日</li>
                    <li class="price">
                        <span>¥199</span>
                        <span>报名学习</span>
                    </li>
                </ul>
            </div> -->
        </div>
        <div class="row introduce">
            <!-- <p>授课师资</p>
            <div class="left">
                <p class="img">
                    <img src="" alt="">
                </p>
                <p class="right">
                    <span>李晓明</span>
                    <span>小U课堂高级讲师</span>
                </p>

            </div>
            <div class="right">
                多年IT行业从业经验，精通常用的Web开发技术;熟悉主流的CMS、商城、论坛
                等PHP开源产品，具有丰富的建站及二次开发经验，多个大型ERP系统的开发实践经验;精通常用的PHP开发框架，对服务器架构及服务器日常运维等方面有一 定的研究。
            </div> -->
        </div>
        <div class="row title" id="list_detail">
            <span class="active">课程目录</span><span>课程详情</span>
        </div>
        <div class="classlist active" id="video_list">
            <div class="content">
                <div class="detail">
                    <ul class="active" id="course_list">

                        <!-- <li>
                            <p>
                                <i class="iconfont icon-bofang"></i>
                                <span>第3节：钠及其化合物</span>
                            </p>
                            <p>2020.12.10 20：00开播</p>
                        </li> -->

                    </ul>
                </div>
            </div>
            <div class="bottom">
            </div>
        </div>
        <div class="classlist" id="course_detail">
            <!-- <img src="../img/videoDetail/detail.png" alt=""> -->
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营 许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>



    <!-- <script src="../js/ujiuye.js"></script> -->
    <script src="../utils/jquery.min.js"></script>
</body>
<!-- 模块化 -->
<script src="../utils/Http.js" type="module"></script>
<script src="../js/myRender.js" type="module"></script>
<script type="module">
    import Http from '../utils/Http.js'
    import {userinfo,showLoginAndRegister,fsToObj} from '../js/myRender.js'
    showLoginAndRegister()

    //获取视频详情的数据
    async function videoDetail() {
        let {
            id = '5415f8fc-5023-45db-b6a9-eadbc5db7879'
        } = fsToObj(location.search);
        let {
            result
        } = await Http({
            url: '/api/course',
            data: {
                id,
            }
        })
        let {
            course,
            teacher,
            videos
        } = result.result;
        // console.log(result.result);
        v_getCourse(course);
        v_getTeacher(teacher);
        v_getVideos(videos);
    }
    videoDetail()
    //渲染课程
    function v_getCourse(data) {
        console.log('aaa');
        let courseCon = `
        <div class="left">
            <img src="${data.image_src}" alt="">
        </div>
        <div class="right">
            <p class="title">${data.title}</p>
            <ul>
                <li>年级科目：${data.grade_name}${data.subject_name}</li>
                <li>地区：${data.area_name}</li>
                <li>${data.intro}</li>
                <li class="price">
                    <span>${data.price ==0 ? '免费学习': '¥'+ data.price}</span>
                    <span class = "enroll">报名学习</span>
                </li>
            </ul>
        </div>
        `;
        $('.classDetail').html(courseCon)
        $('#course_detail').html(`<img src="${data.detail_imgs}" alt="">`);
        console.log('bbb');
        //点击报名学习 函数
        $('.enroll').on('click',async function(){
            let {
                result
            } = await Http({
                url: '/api/study',
                type: 'post',
                data: {
                    cid: data.cid,
                    mid: userinfo.mid,
                }
            })
            if (result == '请登录') {
                alert('请登录')
                location.href = './loginAndRegister/login.html'
                return;
            }
            if (result.status != 200) {
                if (result.msg == '请传递必要参数') {
                    alert('请登录')
                    location.href = './loginAndRegister/login.html'
                }
                alert(result.msg)
            } else {
                alert('报名成功')
                // location.href = './videoPlay.html?id=' +
                // console.log(videos);
            }
        })
    }
    //渲染老师
    function v_getTeacher(data) {
        let teacherCon = `
            <p>授课师资</p>
            <div class="left">
                <p class="img">
                    <img src="${data.head_photo_url}" alt="">
                </p>
                <p class="right">
                    <span>${data.realname}</span>
                    <span>小U课堂高级讲师</span>
                </p>

            </div>
            <div class="right">
                ${data.intro}
            </div>
        `;
        $('.introduce').html(teacherCon)
    }
    // function gotoplay(id) {
    //     location.href = './videoPlay.html?id=' + id
    // }
    //渲染视频 点击视频跳转到视频播放页面
    function v_getVideos(data) {
        let videoCon = ''
        data.forEach(item => {
            videoCon += `
            <li v="${item.id}" onclick=" gotoplay('${item.id}')  ">
                <p>
                    <i class="iconfont icon-bofang"></i>
                    <span>${item.video_title}</span>
                </p>
                <p>2020.12.10 20：00开播</p>
            </li>
            `
        });

        $('#course_list').html(videoCon);

        //点击视频跳转到视频播放页面
        $('#course_list').on('click', 'li', function () {
            location.href = './videoPlay.html?id=' + $(this).attr('v')
        })
    }

    //点击课程目录和课程详情
    $('#list_detail span').on('click', function () {
        $(this).addClass('active').siblings().removeClass('active');

        if ($('#video_list').hasClass('active')) {
            $('#video_list').removeClass('active')
            $('#course_detail').addClass('active')
        } else {
            $('#video_list').addClass('active')
            $('#course_detail').removeClass('active')
        }
    })
    
</script>

</html>